<template>
  <div class="mine">
    <van-nav-bar
      title="个人中心"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="box">
      <div class="left">
        <van-image
          width="100"
          height="100"
          lazy-load
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          round
        />
        <div class="user">
          <div class="tel" v-if="showuser">用户{{this.$store.state.myLoginm.user[0].userinfo.phone}}</div>
          <div class="tel" v-else @click="gologin">去登录</div>
        </div>
      </div>
      <div class="right">
        <van-button
          plain
          type="info"
          v-if="show"
          class="icon"
          size="small"
          @click="gologin"
          round
          >登录</van-button
        >
        <van-button
          plain
          type="info"
          v-else
          class="icon"
          size="small"
          @click="backlogin"
          round
          >退出登录</van-button
        >
      </div>
    </div>
    <img class="pic1" src="../../assets/pic.jpg" alt="" />
    <div class="btns">常用工具</div>
    <div class="box1">
      <div class="utils">
        <van-grid>
          <van-grid-item icon="location-o" text="我的地址" />
          <van-grid-item icon="service-o" text="我的客服" />
          <van-grid-item icon="like-o" text="店铺关注" />
          <van-grid-item icon="star-o" text="评价有礼" />
        </van-grid>
      </div>
    </div>
    <!-- ---- -->
    <div class="box3">
      <div class="service">
        <h4>邀好友赚现金</h4>
        <p>最高得15元</p>
        <van-button plain class="icon1" size="small" round type="info"
          >去邀请</van-button
        >
        <van-button plain class="icon1" size="small" round type="info"
          >查佣金</van-button
        >
      </div>
      <div class="service">
        <h4>饿了么服务号</h4>
        <p>关注后及时接收系统通知</p>
        <van-button plain round type="info" size="small" class="icon1"
          >立即关注</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Image as VanImage } from "vant";
import { Lazyload } from "vant";
import { NavBar } from "vant";
import { Toast } from "vant";
import { Button } from "vant";
import { Grid, GridItem } from "vant";
import { Icon } from "vant";

Vue.use(Icon);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Button);
Vue.use(Toast);
Vue.use(NavBar);
Vue.use(Lazyload);
Vue.use(VanImage);
export default {
  data() {
    return {
      show: true,
      showuser:true
    };
  },
  methods: {
    onClickLeft() {
      Toast("返回");
      this.$router.go(-1);
    },
    gologin() {
      let token = localStorage.getItem("token");
      if (token) {
        this.$router.push("/index/home");
      } else {
        this.$router.push("/login");
      }
    },
    backlogin(){
      Toast("退出登录")
      localStorage.removeItem("token")
      localStorage.removeItem("userinfo")
      this.$router.push("/index/home")
    
    }
  },
  created() {
    let token = localStorage.getItem("token");
    if (token) {
      this.show = !this.show;
      this.showuser=true
    }else{
      this.showuser=false
    }
  },
};
</script>

<style scoped lang="scss">
.mine {
  background-color: rgb(248, 248, 248);
  height: 44.4444rem;
  .box {
    padding: 1.1111rem;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
    }
    .user {
      margin-left: 0.4444rem;
    }

    .icon {
      margin-top: 1.3889rem;
    }
    .utils {
      padding: 0.5556rem 1.1111rem;
      width: 100%;
    }
  }
  .pic1 {
    width: 100%;
    display: inline-block;
    border-radius: 0.8333rem;
    padding: 0 1.1111rem;
    box-sizing: border-box;
  }
  .btns {
    padding: 0.5556rem 1.3889rem;

    font-weight: bold;
  }
  .box3 {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5556rem;
    padding: 0.5556rem;
  }
  .service {
    background-color: #fff;
    border-radius: 0.5556rem;
    height: 8.3333rem;
    width: 48%;
    padding: 0.5556rem;
    box-sizing: border-box;
    p {
      font-size: 0.7222rem;
      color: #ccc;
      margin-top: 0.5556rem;
    }
    .icon1 {
      margin-right: 0.2778rem;
      margin-top: 1.6667rem;
    }
  }
}
</style>